﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Magazine.DetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Magazine"
    xmlns:common="using:Magazine.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
		    <Page.BottomAppBar>
        <AppBar x:Name="BottamApp" Padding="10,0,10,0" MinHeight="100" Background="#FF222222">
            <Grid x:Name="grid" Height="90">
            	
        		<StackPanel Orientation="Horizontal" Margin="0">
        			<Button HorizontalAlignment="Left" VerticalAlignment="Center" Width="73" Height="71" Padding="0" Style="{StaticResource ButtonStyle1}" Margin="20,0,0,0">
        				<Image Height="67" Width="73" Margin="0" Source="Assets/AppBarPic1.png"/>
        			</Button>
        			<Button HorizontalAlignment="Left" VerticalAlignment="Center" Width="73" Height="71" Padding="0" Style="{StaticResource ButtonStyle1}" Margin="10,0,0,0">
        				<Image Height="67" Width="73" Margin="0" Source="Assets/AppBarPic2.png"/>
        			</Button>
        		</StackPanel>
            	
        	</Grid>
        </AppBar>
    </Page.BottomAppBar>
    <Page.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}" Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid x:Name="Header">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Text="Your page title goes here" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}" Visibility="Visible"/>
            <Grid x:Name="MainLogo" HorizontalAlignment="Right" Height="100" VerticalAlignment="Center" Width="214" Grid.Column="1" Margin="10">
                <Image Height="100" VerticalAlignment="Top" Source="Assets/appLogo.png"/>
            </Grid>
        </Grid>
        <ScrollViewer x:Name="scrollViewer" Grid.Row="2" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Style="{StaticResource HorizontalScrollViewerStyle}">
        	<Grid x:Name="MainGrid" Margin="120,0,0,0">
        		<Grid.ColumnDefinitions>
        			<ColumnDefinition Width="999"/>
        			<ColumnDefinition Width="30"/>
        			<ColumnDefinition Width="*"/>
        		</Grid.ColumnDefinitions>
        		<Grid x:Name="FirstGrid" Height="615" VerticalAlignment="Top">
        			<Image Source="Assets/HubImage/bigTileBg1.png"/>
        			<Grid x:Name="FirstInnerGrid" HorizontalAlignment="Left" Height="605" VerticalAlignment="Top" Width="988" Background="White">
        				<Grid.RowDefinitions>
        					<RowDefinition Height="397"/>
        					<RowDefinition Height="51*"/>
        				</Grid.RowDefinitions>
        				<Grid>
        					<Grid.ColumnDefinitions>
        						<ColumnDefinition Width="362"/>
        						<ColumnDefinition Width="*"/>
        					</Grid.ColumnDefinitions>
        					<Image HorizontalAlignment="Center" Height="355" VerticalAlignment="Center" Width="325" Source="Assets/HubImage/PIc4.png" Stretch="None"/>
        					<Grid Grid.Column="2">
        						<Grid.RowDefinitions>
        							<RowDefinition Height="50"/>
        							<RowDefinition Height="*"/>
        						</Grid.RowDefinitions>
        						<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="In This Month’s  Issue" VerticalAlignment="Bottom" FontFamily="Segoe UI" FontSize="26" Foreground="Black"/>
        						<StackPanel Grid.RowSpan="2" Grid.Row="1" Orientation="Horizontal">
        							<TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in velit odio, in tincidunt sem. Phasellus vitae lorem in mauris tempus gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.                                                         Nunc quis lectus odio. Ut vel venenatis nisi. Cras ac dictum velit. Sed quis nisl elementum massa dapibus dapibus in sit amet mauris. Maecenas quis est vel dui sodales pulvinar ac ut odio. Suspendisse potenti. Etiam tempus pretium feugiat.  Maecenas quis est vel dui sodales pulvinar ac ut odio. Suspendisse potenti. Etiam tempus pretium feugiat." Width="255" HorizontalAlignment="Left" Foreground="Black" FontFamily="Segoe UI" FontSize="14" Margin="0,0,50,0" FontWeight="Light"/>
        							<TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in velit odio, in tincidunt sem. Phasellus vitae lorem in mauris tempus gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.                                                         Nunc quis lectus odio. Ut vel venenatis nisi. Cras ac dictum velit. Sed quis nisl elementum massa dapibus dapibus in sit amet mauris. Maecenas quis est vel dui sodales pulvinar ac ut odio. Suspendisse potenti. Etiam tempus pretium feugiat." Width="290" HorizontalAlignment="Left" Foreground="Black" FontFamily="Segoe UI" FontSize="14" FontWeight="Light"/>
        						</StackPanel>
        					</Grid>
        				</Grid>
        				<Grid Margin="20,0,0,0" Grid.Row="1">
        					<Grid.RowDefinitions>
        						<RowDefinition Height="50"/>
        						<RowDefinition Height="*"/>
        					</Grid.RowDefinitions>
        					<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Contents" VerticalAlignment="Bottom" FontFamily="Segoe UI" FontSize="26" Foreground="Black"/>
        					<StackPanel Grid.RowSpan="2" Grid.Row="1" Orientation="Horizontal">
        						<StackPanel Width="350">
        							<Grid Height="30">
        								<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        								<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        								</StackPanel>
        							</Grid>
        							<Grid Height="30">
        								<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        								<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        								</StackPanel>
        							</Grid>
        							<Grid Height="30">
        								<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        								<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        								</StackPanel>
        							</Grid>
        							<Grid Height="30">
        								<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        								<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        								</StackPanel>
        							</Grid>
        							<Grid Height="30">
        								<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        								<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        								</StackPanel>
        							</Grid>
        						</StackPanel>
        						<StackPanel Width="350">
        							<Grid Height="30">
        								<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        								<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        								</StackPanel>
        							</Grid>
        							<Grid Height="30">
        								<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        								<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        								</StackPanel>
        							</Grid>
        							<Grid Height="30">
        								<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        								<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        								</StackPanel>
        							</Grid>
        							<Grid Height="30">
        								<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        								<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        								</StackPanel>
        							</Grid>
        							<Grid Height="30">
        								<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        								<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        									<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        								</StackPanel>
        							</Grid>
        						</StackPanel>
        					</StackPanel>
        				</Grid>
        			</Grid>
        		</Grid>
        		<StackPanel Grid.Column="2" Background="White" VerticalAlignment="Top" Width="277" Margin="0,0,50,0">
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        			<Grid Height="30" Margin="10,0,0,0">
        				<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="05" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,20,0"/>
        				<StackPanel Height="30" VerticalAlignment="Top" Orientation="Horizontal">
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="18.667" FontWeight="SemiBold" Foreground="Black" Margin="0,0,10,0"/>
        					<TextBlock TextWrapping="Wrap" Text="lorem ipsum" FontFamily="Segoe UI" FontSize="13" FontWeight="SemiBold" Foreground="#FF7E7B7B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        				</StackPanel>
        			</Grid>
        		</StackPanel>
        	</Grid>
        </ScrollViewer>
        <Grid x:Name="Snaped" HorizontalAlignment="Left" Height="100" Opacity="0" VerticalAlignment="Top" Width="100" Visibility="Collapsed">
        	<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Opacity="0" TextWrapping="Wrap" Text="Please switch to full screen to view the details." VerticalAlignment="Top"/>
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainLogo" Storyboard.TargetProperty="HorizontalAlignment">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainLogo" Storyboard.TargetProperty="HorizontalAlignment">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="scrollViewer">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Snaped" d:IsOptimized="True" To="1"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<x:Int32>0</x:Int32>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<x:Double>NaN</x:Double>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<x:Double>NaN</x:Double>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<HorizontalAlignment>Stretch</HorizontalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<VerticalAlignment>Stretch</VerticalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock" d:IsOptimized="True" To="1"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<VerticalAlignment>Center</VerticalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<HorizontalAlignment>Center</HorizontalAlignment>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.FontFamily)" Storyboard.TargetName="textBlock">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<FontFamily>Segoe UI</FontFamily>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetProperty="(TextBlock.FontSize)" Storyboard.TargetName="textBlock" d:IsOptimized="True" To="21.333"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<x:Int32>2</x:Int32>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Snaped">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Visible</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
